<template>
  <div class="app-container">
    <PageSearch
      :showSearch.sync="showSearch"
      :getList="getList"
      :handleQuery="handleQuery"
      :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="orderNo">
              <el-input
                :placeholder="$t('订单号')"
                v-model="queryParams.orderNo"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="distrName">
              <el-input
                :placeholder="$t('租户名称')"
                v-model="queryParams.distrName"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <!-- v-print="printContent" -->
        <el-button
          :disabled="tableCheck.length !== 1"
          size="mini"
          @click="handlePrint"
          v-hasPermi="['distribution:orderPackage:poQuestionPackagePrint']">
          {{ $t('打印邮局面单') }}
        </el-button>
        <el-button
          :disabled="tableCheck.length == 0"
          v-hasPermi="['distribution:orderQuestionApply:exportOrderQuestionPackage']"
          size="mini"
          @click="exportOrderQuestionPackage">
          <!-- 导出包裹 -->
          {{ $t('导出包裹') }}
        </el-button>
        <el-button
          v-hasPermi="['distribution:order:exportOrderQuestionExpressSheet']"
          size="mini"
          @click="handleExportExpressSheet">
          <!-- 导出面单 -->
          {{ $t('导出面单') }}
        </el-button>
        <el-button
          v-hasPermi="['distribution:orderQuestionApply:importOrderQuestionPackageExpressNo']"
          size="mini"
          @click="
            () => {
              importInfo.query.packageExpressType = 1
              importInfo.show = true
            }
          ">
          <!-- 导入黑猫快递单号 -->
          {{ $t('导入黑猫快递单号') }}
        </el-button>
        <el-button
          v-hasPermi="['distribution:orderQuestionApply:importOrderQuestionPackageExpressNo']"
          size="mini"
          @click="
            () => {
              importInfo.query.packageExpressType = 2
              importInfo.show = true
            }
          ">
          <!-- 导入佐川快递单号 -->
          {{ $t('导入佐川快递单号') }}
        </el-button>
        <el-tooltip
          effect="dark"
          content="补发和换货流程都是先处理完成问题订单然后出库以后在这理导入快递单号导出包裹和面单"
          placement="top-start">
          <el-button size="mini" type="text" icon="el-icon-info" circle></el-button>
        </el-tooltip>
      </template>
    </PageSearch>

    <el-table
      :height="calTableHeight()"
      ref="mianRef"
      @selection-change="(rows) => (tableCheck = rows)"
      v-loading="loading"
      :data="tableData">
      <el-table-column type="selection" width="55" align="center"> </el-table-column>
      <el-table-column show-overflow-tooltip label="包裹号" width="180" align="center" prop="packageNo" />
      <el-table-column show-overflow-tooltip :label="$t('租户名称')" align="center" prop="distrName" />
      <el-table-column show-overflow-tooltip label="订单号" width="180" align="center" prop="orderNo" />
      <el-table-column show-overflow-tooltip label="处理方式" align="center" prop="processingMethod">
        <template slot-scope="{ row }">
          <!-- 1-换货 2-退款 3-补发 -->
          <span v-if="row.processingMethod == 1" style="color: goldenrod"> 换货 </span>
          <span v-if="row.processingMethod == 2" style="color: purple"> 退款 </span>
          <span v-if="row.processingMethod == 3" style="color: red"> 补发 </span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="sku费用承担/sku费用承担人"
        align="center"
        prop="undertakeDistrNameList">
        <template slot-scope="{ row }">
          <div
            style="cursor: pointer"
            @click="handleSkuFee(row)"
            v-if="row.undertakeDistrNameList && row.undertakeDistrNameList.length > 0">
            <div v-if="row.undertakeDistrNameList.length > 1">多个</div>
            <div v-else>
              <!-- undertakeDistrType	承担方 1-平台 2-供应商 3-卖家   -->
              <!-- 承担方 -->
              <div
                v-if="row.undertakeDistrNameList[0].undertakeDistrType == 1"
                :style="{ color: $randomColor(row.undertakeDistrNameList[0].reissueFreightBaleType) }">
                <span> 平台/</span>
                <span>{{ row.undertakeDistrNameList[0].undertakeDistrName }}</span>
              </div>
              <!-- 供应商 -->
              <div
                v-if="row.undertakeDistrNameList[0].undertakeDistrType == 2"
                :style="{ color: $randomColor(row.undertakeDistrNameList[0].reissueFreightBaleType) }">
                <span>供应商/</span>
                <span>{{ row.undertakeDistrNameList[0].undertakeDistrName }}</span>
              </div>
              <!-- 卖家 -->
              <div
                v-if="row.undertakeDistrNameList[0].undertakeDistrType == 3"
                :style="{ color: $randomColor(row.undertakeDistrNameList[0].reissueFreightBaleType) }">
                <span>卖家/</span>
                <span>{{ row.undertakeDistrNameList[0].undertakeDistrName }}</span>
              </div>
            </div>
          </div>
          <span style="cursor: pointer" v-else>无</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="捆包/运费承担"
        align="center"
        prop="reissueFreightBaleType">
        <template slot-scope="{ row }">
          <!-- reissueFreightBaleType  补发运费捆包费承担方 1-平台 2-供应商 3-卖家	 -->
          <span
            v-if="row.reissueFreightBaleType == 1"
            :style="{ color: $randomColor(row.reissueFreightBaleType) }">
            平台
          </span>
          <span
            v-if="row.reissueFreightBaleType == 2"
            :style="{ color: $randomColor(row.reissueFreightBaleType) }">
            供应商
          </span>
          <span
            v-if="row.reissueFreightBaleType == 3"
            :style="{ color: $randomColor(row.reissueFreightBaleType) }">
            卖家
          </span>
          <span v-if="!row.reissueFreightBaleType" :style="{ color: $randomColor() }">无</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="捆包/运费承担方" align="center" prop="shopName">
        <template slot-scope="{ row }">
          <span>{{ row.reissueFreightBaleDistrName || '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="快递标识" align="center" prop="deliveryWayFinal" />
      <el-table-column show-overflow-tooltip label="快递号" align="center" prop="deliveryNo" />
      <el-table-column show-overflow-tooltip label="运费" align="center" prop="deliveryFee" />
      <el-table-column show-overflow-tooltip label="捆包费" align="center" prop="bundleFee" />
      <el-table-column show-overflow-tooltip label="收货人" align="center" prop="receiveName" />
      <el-table-column show-overflow-tooltip label="收货人电话" align="center" prop="receivePhone" />
      <el-table-column show-overflow-tooltip label="收货地址" align="center" prop="receiveAddress" />

      <el-table-column show-overflow-tooltip label="是否出库" align="center" prop="isOutWarehouse">
        <template slot-scope="{ row }">
          <span v-if="row.isOutWarehouse == 0" style="color: greenyellow"> 否 </span>
          <span v-if="row.isOutWarehouse == 1" style="color: greenyellow"> 是 </span>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip label="创建时间" align="center" prop="createTime" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 详情 -->
    <Detail :show.sync="detail.show" @getList="getList" :formData="detail.formData" />
    <SkuFee :show.sync="skuFee.show" @getList="getList" :formData="skuFee.formData" />
    <!-- 导入 -->
    <Import
      action="/distribution/orderQuestionApply/importOrderQuestionPackageExpressNo"
      @success="getList"
      :show.sync="importInfo.show"
      :query="importInfo.query"
      :tip="$t('仅允许导入.csv,.xls格式文件')"
      accept=".csv,xls">
    </Import>
    <!-- 导出面单 -->
    <ExportExpressSheet
      action="/distribution/orderQuestionApply/exportOrderQuestionExpressSheet"
      :show.sync="exportExpressSheet.show"
      accept="*" />

    <!-- 导出面单 -->
    <OrderPrint :show.sync="orderPrint.show" :formData="orderPrint.formData" />
  </div>
</template>

<script>
import Import from '@/components/Import/index.vue'
import { orderQuestionPackageList, poQuestionPackagePrint } from '@/api/orderManage/orderQuestionPackageList'
import Detail from './components/detail.vue'
import SkuFee from './components/skuFee.vue'
import OrderPrint from './components/orderPrint.vue'
import ExportExpressSheet from '@/views/distribution/orderBatchs/components/exportExpressSheet.vue'
import Print from 'vue-print-nb'

export default {
  activated() {
    this.$nextTick(() => this.$refs['mianRef']?.doLayout())
  },
  name: 'MercariPersonalSync',
  directives: {
    Print,
  },
  components: {
    Detail,
    Import,
    SkuFee,
    ExportExpressSheet,
    OrderPrint,
  },
  data() {
    return {
      orderPrint: {
        show: false,
        formDate: {},
      },
      printContent: {
        id: 'printTests',
        preview: false, // 预览工具是否启用
        previewTitle: '面单', // 预览页面的标题
        popTitle: '面单', // 打印页面的页眉
        previewBeforeOpenCallback() {},
        previewOpenCallback() {},
        beforeOpenCallback(vue) {
          console.log(` beforeOpenCallback==>`)
          vue.printLoading = true
        },
        openCallback(vue) {
          vue.printLoading = false
        },
        closeCallback(vue) {
          console.log('预览页面关闭')
          // vue.handleFocus('inputRef2')
        },
        clickMounted(vue) {
          console.log('预览页面开启')
        },
      },
      /**导入 */
      importInfo: {
        show: false,
        query: {
          // 1-黑猫，2-佐川，
          packageExpressType: '',
        },
      },
      exportExpressSheet: {
        show: false,
        formDate: {},
      },
      tableCheck: [],
      /**sku费用承担/sku费用承担人  */
      skuFee: {
        show: false,
        formData: {},
      },
      /**详情 */
      detail: {
        show: false,
        formData: {},
      },
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 供应厂家表格数据
      tableData: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: [],
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handlePrint() {
      const data = {
        packageNo: this.tableCheck[0].packageNo,
      }
      poQuestionPackagePrint(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.orderPrint.formData = { data: JSON.parse(data).poPrint }
          this.orderPrint.show = true
        }
      })
    },

    /** 导出面单*/
    handleExportExpressSheet() {
      this.exportExpressSheet.show = true
    },
    handleSkuFee(row) {
      this.skuFee.formData = row
      this.skuFee.show = true
    },
    exportOrderQuestionPackage() {
      const data = {
        orderQuestionPackageIdList: this.tableCheck.map((i) => i.orderQuestionApplyId),
      }
      this.download(
        '/distribution/orderQuestionApply/exportOrderQuestionPackage',
        data,
        `${new Date().getTime()}.xlsx`,
      )
    },

    handleDelete(row) {
      this.$confirm(this.$t('确定删除?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        // deleteOrderMercariIndividualByRecordsId(row.recordsId).then((res) => {
        //   const { code, data, msg } = res
        //   if (code === 200) {
        //     this.$message({ type: 'success', message: msg})
        //     this.getList()
        //   }
        // })
      })
    },
    handleDetail(row) {
      this.detail.show = true
      this.detail.formData = row
    },
    /** 查询供应厂家列表 */
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const createTimeStart = selectDate[0] || ''
      const createTimeEnd = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        createTimeStart,
        createTimeEnd,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      orderQuestionPackageList(data).then((response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
  },
}
</script>
